<template>
	<view class="container">
		<view class="top">
			<view class="title">个人中心</view>
			<image src="../../static/images/ljh/YL.png" class="tx"></image>
			<view class="grxx">
				<text class="xm">张先生</text>
				<text class="sjhm">15890762905</text>
			</view>
			<view class="yhqkp" @click="toyhq()">
				<view class="">
					我的优惠券
				</view>
				<view class="">
					3张
				</view>
			</view>
		</view>
		<uni-card title="我的订单" extra="全部订单 >" @click="myorder_btn" style="margin-top: 100rpx;">
			<view class="dd">
				<view class="ddimg1">
					待支付
				</view>
				<view class="ddimg2">
					待支付
				</view>
				<view class="ddimg3">
					待支付
				</view>
			</view>
		</uni-card>
<!--		<uni-card title="我的服务" @click="onClick">-->
    <uni-card title="我的服务">
			<view class="wdfw">
				<view class="fw">
					<image @click="coupon_btn" src="../../static/images/ljh/fw1.png"></image>
					<view>领券中心</view>
				</view>
				<view class="fw">
					<image src="../../static/images/ljh/fw2.png"></image>
					<view>邀请好友</view>
				</view>
				<view class="fw">
					<image @click="vehicle_btn" src="../../static/images/ljh/fw3.png"></image>
					<view>我的车辆</view>
				</view>
				<view class="fw">
					<image @click="consume_btn" src="../../static/images/ljh/fw4.png"></image>
					<view>消费记录</view>
				</view>
				<view class="fw">
					<image @click="maintain_btn" src="../../static/images/ljh/fw5.png"></image>
					<view>我的维修</view>
				</view>
				<view class="fw">
					<image src="../../static/images/ljh/fw6.png"></image>
					<view>意见反馈</view>
				</view>
				<view class="fw">
					<image src="../../static/images/ljh/fw7.png"></image>
					<view>收货地址</view>
				</view>
			</view>
		</uni-card>
		<u-button type="primary" text="退出登录" class="tcdl" @click="signOut_btn"></u-button>

		<!-- 紧急救援 -->
		<view @click="GotoEmergency" class="emergency-container">
			<image src="../../static/emergency@2x.png" class="emergency-image"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// thumbnail: ''
			}
		},
		methods: {
			toyhq() {
				uni.$u.route('/pages/ryx/Coupon/Coupon')
			},
			myorder_btn() {
				uni.$u.route('/pages/wpc/myorder/myorder')
			},
			coupon_btn() {
				uni.$u.route('/pages/ryx/Coupon_Center/Coupon_Center')
			},
			vehicle_btn() {
				uni.$u.route('/pages/ly/vehicle/vehicle')
			},
			consume_btn() {
				uni.$u.route('/pages/ly/consume/consume')
			},
			maintain_btn() {
				uni.$u.route('/pages/ryx/Maintain/Maintain')
			},
			signOut_btn() {
				uni.$u.route('/pages/ljh/Login/Login')
			}
		}
	}
</script>

<style>
	.container{
		/* 页面其他内容的样式 */
		  position: relative; /* 确保固定位置的元素能够相对于整个页面定位 */
		  width: 100%;
		  height: 100%;
		  /* 其他样式根据需要添加 */
	}
	/* 紧急救援容器的样式 */
	.emergency-container {
	  position: fixed; /* 固定定位 */
	  bottom: 30rpx; /* 紧贴页面底部 */
	  left: 50%; /* 水平居中，先设置到页面中间 */
	  transform: translateX(-50%); /* 水平方向反向移动自身宽度的一半，实现真正居中 */
	  width: fit-content; /* 容器宽度适应内容 */
	  display: flex; /* 使用弹性布局 */
	  align-items: center; /* 垂直居中 */
	  justify-content: center; /* 水平居中（虽然由于 translateX 已经居中，这里不是必需的） */
	  height: 100rpx; /* 根据需要设置容器高度，包含图片和内边距等 */
	  background-color: rgba(255, 0, 0, 0.8); /* 可选：设置背景色和透明度 */
	  border-radius: 10rpx; /* 可选：设置圆角 */
	  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
	  /* 确保点击区域足够大，可以通过增加内边距或容器高度来实现 */
	  z-index: 9999;
	}
	.emergency-image {
	  width: 100rpx;
	  height: 100rpx;
	  /* 其他图片样式根据需要添加 */
	}
	
	.tcdl {
		width: 80%;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
	}

	.wdfw {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
	}

	.fw {
		width: 100rpx;
		height: 100rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		font-size: 18rpx;
		text-align: center;
		font-weight: bold;
	}

	.fw image {
		width: 78rpx;
		height: 60rpx;
	}

	.dd {
		display: flex;
		justify-content: space-between;
	}

	.ddimg1 {
		width: 180rpx;
		height: 100rpx;
		background-image: url(@/static/images/ljh/zu1.png);
		text-align: center;
		line-height: 100rpx;
		color: white;
	}

	.ddimg2 {
		width: 180rpx;
		height: 100rpx;
		background-image: url(@/static/images/ljh/zu2.png);
		text-align: center;
		line-height: 100rpx;
		color: white;
	}

	.ddimg3 {
		width: 180rpx;
		height: 100rpx;
		background-image: url(@/static/images/ljh/zu3.png);
		text-align: center;
		line-height: 100rpx;
		color: white;
	}

	.yhqkp {
		background-color: white;
		width: 92%;
		margin-left: 4%;
		border-radius: 15rpx;
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
		height: 120rpx;
		align-items: center;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	}

	.top {
		width: 100%;
		height: 450rpx;
		background-image: url(@/static/images/ljh/tc1.png);
	}

	.title {
		width: 100%;
		color: white;
		text-align: center;
		padding: 30rpx 0rpx;
		font-size: 35rpx;
	}

	.tx {
		border-radius: 50%;
		width: 150rpx;
		height: 150rpx;
		display: block;
		/* 将图片转换为块级元素 */
		margin: 20rpx auto;
		/* 应用自动外边距以在水平方向上居中 */
	}

	.grxx {
		text-align: center;
	}

	.xm {

		color: white;

	}

	.sjhm {
		color: white;
		font-size: 25rpx;
		font-weight: 25rpx;
		margin-left: 20rpx;
	}
</style>